<!--转账结果页-->

<template>
  <div class="base">

    <div class="container">

      <nav-bar title="转账详情" @leftAction="_leftAction" bg-color="">
        <div class="myC" @click="_rightBtn">完成</div>
      </nav-bar>

      <div class="cellBase">
        <div class="cell" v-for="item,index in infoData">
          <div class="head">
            <img :src="item.img" alt="">
            <span :class="index===1?span2:''">{{item.name}}</span>
          </div>
          <div class="line" :class="index===1?line2:''"></div>
        </div>
      </div>


      <div class="cellBase2">
        <div class="head">
          <div class="line"></div>
          <img :src="img3" alt="">
          <span>预计2小时内到账</span>
          <span class="span2">如信息填写有误，资金将原路退回</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import img1 from '../../assets/img/ico_step@3x.png'
import img2 from '../../assets/img/ico_step／gry@3x.png'

import navBar from '../../components/navBar'

export default {
  name: 'AcctransDetail',
  components: {navBar},
  data () {
    return {
      infoData: [
        {name: '转账申请已提交', img: img1},
        {name: '银行处理中', img: img1},
      ],
      line2: 'line2',
      span2: 'span2',
      img3: img2,
    }
  },
  methods: {
    _leftAction () {
      this.$router.go(-1)
    },
    _rightBtn () {
      this.$router.go(-1)
    },
  },
}
</script>

<style scoped lang="less">
  .base {
      background-color: #fff;
    width: 3.75rem;
    height: 6rem;
    overflow: hidden;

    .container {
        margin-top: 0.21rem;
      background-color: #fff;
      width: 3.75rem;

      .myC {
        color: #3968FF;
      }

      /*相同部分*/
      .cellBase {

        margin-left: 0.21rem;
        .cell {
          .head {
            img {
              width: 0.24rem;
              height: 0.24rem;
            }
            span {
              color: #000;
              margin-left: 0.04rem;
              font-size: 0.16rem;
            }
            .span2 {
              color: #3968FF;
            }
          }
          .line {
            height: 0.41rem;
            width: 0.01rem;
            background-color: #3968FF;
            margin-left: 0.12rem;
          }
          .line2 {
            height: 0.31rem;
          }
        }
      }

      /*特殊部分*/
      .cellBase2 {
        margin-left: 0.21rem;
        .line {
          height: 0.1rem;
          width: 0.01rem;
          background-color:#D0D0D0;
          margin-left: 0.12rem;
        }
        .head {
          img {
            width: 0.24rem;
            height: 0.24rem;
          }
          span {
            color: #333333;
            margin-left: 0.04rem;
            font-size: 0.16rem;
          }
          .span2 {
            color: #999999;
            margin-left: 0.35rem;
            font-size: 0.14rem;
            display: block;
          }
        }

      }
    }
  }
</style>
